<template>
  <div class="app-layout" style="height: 100vh; overflow: auto;">
    <!-- Header -->
    <header class="app-header">
      <div class="header-container">
        <div class="header-content">
          <div class="logo-section">
            <div class="logo" @click="goToIndex">🛍️ 精品商城</div>
          </div>
          
          <div class="search-section">
            <div class="search-container">
              <el-input
                v-model="searchQuery"
                placeholder="搜索你想要的商品..."
                clearable
                class="search-input"
                size="large"
                @keyup.enter="handleSearch"
              >
                <template #prefix>
                  <el-icon class="search-icon"><Search /></el-icon>
                </template>
              </el-input>
              <el-button 
                type="primary" 
                size="large" 
                class="search-btn"
                @click="handleSearch"
              >
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
            </div>
          </div>
          
          <div class="user-section">
            <div v-if="!isLoggedIn" class="auth-buttons">
              <el-button @click="goToLogin" round>登录</el-button>
              <el-button type="primary" @click="goToRegister" round>注册</el-button>
            </div>
            <el-dropdown v-if="isLoggedIn" trigger="hover" class="user-dropdown">
              <div class="user-info">
                <img :src="userInfo.avatar || avatar" class="user-avatar" alt="用户头像">
                <span class="username">{{ userInfo.username || '用户' }}</span>
                <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goToProfile">
                    <el-icon><User /></el-icon>
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item @click="goToOrders">
                    <el-icon><ShoppingBag /></el-icon>
                    我的订单
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div v-if="notices.length" class="notice-bar">
          <div class="notice-track">
            <template v-for="repeat in 2">
              <span
                v-for="n in notices"
                :key="`${repeat}-${n.id}`"
                class="notice-item"
              >
                {{ n.title }} — {{ n.content }}
              </span>
            </template>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="app-main">
      <div class="main-container">
        <router-view />
      </div>
    </main>

    <!-- Footer -->
    <footer class="app-footer">
      <div class="footer-container">
        <div class="footer-content">
          <div class="footer-section">
            <h4>关于我们</h4>
            <p>致力于为用户提供优质的购物体验</p>
            <div class="footer-links">
              <a href="#">公司简介</a>
              <a href="#">联系我们</a>
              <a href="#">招聘信息</a>
            </div>
          </div>
          <div class="footer-section">
            <h4>客户服务</h4>
            <div class="footer-links">
              <a href="#">帮助中心</a>
              <a href="#">售后服务</a>
              <a href="#">配送说明</a>
              <a href="#">退换货政策</a>
            </div>
          </div>
          <div class="footer-section">
            <h4>关注我们</h4>
            <div class="social-links">
              <a href="#" class="social-link">📱 微信</a>
              <a href="#" class="social-link">📺 微博</a>
              <a href="#" class="social-link">📧 邮箱</a>
            </div>
          </div>
          <div class="footer-section">
            <h4>联系方式</h4>
            <p>📞 客服热线：400-123-4567</p>
            <p>📧 邮箱：support@mall.com</p>
            <p>🕘 服务时间：9:00-22:00</p>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2025 精品商城. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import avatar from '@/assets/default.png'
import { 
  Search, ArrowDown, User, ShoppingBag, SwitchButton 
} from '@element-plus/icons-vue';
import { useUserInfoStore } from '@/stores/userInfo';
import { fetchNoticeList } from '@/api/notice';

const searchQuery = ref('');
const router = useRouter();
const userStore = useUserInfoStore();
const isLoggedIn = computed(() => userStore.userInfo.isLoggedIn);
const userInfo = computed(() => userStore.userInfo);
const defaultAvatar = ref('http://localhost:8080/assets/default.png');

const notices = ref([]);

onMounted(async () => {
  const res = await fetchNoticeList();
  if (res?.data?.code === '200') notices.value = res.data.data || [];
});

const handleSearch = () => {
  const keyword = searchQuery.value.trim();
  if (!keyword) {
    ElMessage.warning('请输入搜索关键词');
    return;
  }
  router.push({ name: 'ProductResult', query: { q: keyword } });
};

const goToRegister = () => {
  router.push({ name: 'register' });
};

const goToLogin = () => {
  router.push({ name: 'Login' });
};

const goToProfile = () => {
  router.push('/Dashboard/user/userInfo');
};

const goToOrders = () => {
  router.push('/Dashboard/user/orders');
};

const logout = () => {
  userStore.logout();
  router.push('/index');
  ElMessage.success('已成功退出登录');
};

const goToIndex = () => router.push('/index');
</script>

<style scoped>
/* AppLayout.vue Styles (Global/Layout-specific) */

/* Base Layout */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f0f2f5; /* Light background for the whole app */
}

/* --- Header --- */
.app-header {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Softer shadow */
  padding: 15px 0; /* Vertical padding */
  position: sticky; /* Make header sticky */
  top: 0;
  z-index: 1000; /* Ensure it stays on top */
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px; /* Gap between sections */
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 1.8rem; /* Larger logo */
  font-weight: 700;
  color: #409eff; /* Highlight color */
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap; /* Prevent logo from wrapping */
}

.logo:hover {
  color: #337ecc; /* Darken on hover */
}

/* Search Section */
.search-section {
  flex-grow: 1; /* Allow search bar to take available space */
  max-width: 600px; /* Max width for search input */
}

.search-container {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 30px; /* Pill-shaped search bar */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.search-container:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.search-input {
  flex-grow: 1;
}

.search-input :deep(.el-input__wrapper) {
  border: none !important;
  box-shadow: none !important;
  padding: 8px 15px; /* Adjust padding */
}

.search-input :deep(.el-input__prefix) {
  padding-right: 8px;
  color: #909399;
}

.search-input :deep(.el-input__inner) {
  font-size: 1rem;
}

.search-btn {
  border-radius: 0 30px 30px 0; /* Match search bar rounding */
  padding: 0 25px;
  height: 40px; /* Match input height */
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.search-btn .el-icon {
  margin-right: 5px;
}


/* User Section */
.user-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.auth-buttons .el-button {
  font-weight: 600;
  padding: 9px 20px;
}

.auth-buttons .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 25px;
  background-color: #f4f7f9;
  transition: background-color 0.3s ease;
}

.user-info:hover {
  background-color: #e6e9eb;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #409eff;
}

.username {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.dropdown-arrow {
  font-size: 1rem;
  color: #909399;
  transition: transform 0.3s ease;
}

.el-dropdown__popper.is-light .user-dropdown .user-info[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}


/* --- Main Content --- */
.app-main {
  flex-grow: 1; /* Allows main content to fill remaining space */
  padding: 20px 0; /* Add vertical padding */
}

.main-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Footer --- */
.app-footer {
  background-color: #2c3e50; /* Darker footer background */
  color: #ecf0f1; /* Light text color */
  padding: 40px 0; /* Generous padding */
  font-size: 0.95rem;
  border-top: 5px solid #409eff; /* Highlight border */
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid for sections */
  gap: 30px; /* Space between sections */
  margin-bottom: 30px;
}

.footer-section h4 {
  font-size: 1.2rem;
  color: #409eff; /* Highlight section titles */
  margin-bottom: 20px;
  font-weight: 700;
}

.footer-section p {
  line-height: 1.8;
  margin-bottom: 10px;
  color: #bdc3c7;
}

.footer-links a,
.social-links a {
  display: block; /* Make links block level */
  color: #ecf0f1;
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.footer-links a:hover,
.social-links a:hover {
  color: #409eff; /* Highlight on hover */
  text-decoration: underline;
}

.social-links {
  display: flex;
  flex-direction: column; /* Stack social links */
  gap: 10px;
}

.social-link {
  font-size: 1.1rem;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  margin-top: 20px;
  color: #bdc3c7;
}

/* --- Responsive Design for AppLayout --- */
@media (max-width: 992px) {
  .header-content {
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center;
  }
  .logo-section, .user-section {
    flex-basis: 100%; /* Take full width */
    justify-content: center;
    margin-bottom: 15px;
  }
  .search-section {
    order: 3; /* Move search to bottom row */
    flex-basis: 100%;
    max-width: 100%; /* Allow search to expand */
  }
  .search-container {
    width: 100%;
  }
  .footer-content {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 10px 0;
  }
  .header-container, .main-container, .footer-container {
    padding: 0 16px;
  }
  .logo {
    font-size: 1.6rem;
  }
  .search-input :deep(.el-input__wrapper) {
    padding: 6px 12px;
  }
  .search-btn {
    height: 36px;
    padding: 0 20px;
  }
  .auth-buttons .el-button {
    padding: 7px 15px;
  }
  .user-avatar {
    width: 32px;
    height: 32px;
  }
  .username {
    font-size: 0.9rem;
  }

  .app-main {
    padding: 15px 0;
  }

  .app-footer {
    padding: 30px 0;
  }
  .footer-content {
    grid-template-columns: 1fr; /* Stack footer sections */
    gap: 20px;
    text-align: center;
  }
  .footer-links a, .social-links a {
    display: inline-block; /* Inline for stacked layout */
    margin: 0 10px 8px 10px;
  }
  .social-links {
    flex-direction: row; /* Row for social links */
    justify-content: center;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 1.4rem;
  }
  .search-btn {
    font-size: 0.9rem;
  }
  .auth-buttons {
    flex-direction: column; /* Stack login/register buttons */
    gap: 10px;
  }
  .user-info {
    padding: 6px 10px;
  }
  .user-avatar {
    width: 28px;
    height: 28px;
  }
  .username {
    font-size: 0.85rem;
  }
}

.notice-bar{
  margin-top:8px;
  background:rgba(64,158,255,.15);
  overflow:hidden;
  border-radius:6px;
  padding:6px 0;
}

.notice-track{
  display:inline-block;
  white-space:nowrap;
  animation: marquee 60s linear infinite;
}

@keyframes marquee{
  0%   { transform:translateX(0%) }
  100% { transform:translateX(-50%) }
}

.notice-item{
  margin-right:3rem;
  font-size:17px;
}

.notice-bar:hover .notice-track{animation-play-state:paused}

</style>